<template>
  <section class="section">
    <div class="container">
      <h1 class="title">视频表单</h1>
      <form class="box" @submit.prevent="submitVideoForm">
        <div class="field">
          <label class="label">标题</label>
          <div class="control">
            <input class="input" type="text" v-model="title" required>
          </div>
        </div>

        <div class="field">
          <label class="label">用途</label>
          <div class="control">
            <input class="input" type="text" v-model="purpose" required>
          </div>
        </div>

        <div class="field">
          <label class="label">价格</label>
          <div class="control">
            <input class="input" type="number" step="0.01" v-model="price" required>
          </div>
        </div>

        <div class="field">
          <label class="label">封面</label>
          <div class="file has-name">
            <label class="file-label">
              <input
                class="file-input"
                type="file"
                accept="image/*"
                @change="uploadCover($event)"
                required
              >
              <span class="file-cta">
                <span class="file-icon">
                  <i class="fas fa-upload"></i>
                </span>
                <span class="file-label">
                  <i class="iconfont icon-upload"></i>选择文件...
                </span>
              </span>
              <span class="file-name">{{ pic }}</span>
            </label>
          </div>
        </div>

        <div class="field">
          <label class="label">视频</label>
          <div class="file has-name">
            <label class="file-label">
              <input
                class="file-input"
                type="file"
                accept="video/*, audio/*"
                @change="uploadVideo($event)"
                required
              >
              <span class="file-cta">
                <span class="file-icon">
                  <i class="fas fa-upload"></i>
                </span>
                <span class="file-label">
                  <i class="iconfont icon-upload"></i>选择文件...
                </span>
              </span>
              <span class="file-name">{{ url }}</span>
            </label>
          </div>
        </div>

        <div class="control">
          <button class="button is-primary is-fullwidth">
            <i class="iconfont icon-submit-o"></i>提交
          </button>
        </div>
      </form>
    </div>
  </section>
</template>

<script>
import { uploadFile, submitVideo } from "../api";
import { flash } from "../functions";
export default {
  data() {
    return {
      url: "",
      pic: "",
      title: "",
      price: "",
      purpose: ""
    };
  },
  components: {},
  methods: {
    uploadCover(e) {
      uploadFile(e.target.files[0], res => {
        this.pic = res.data.data[0];
        flash("图片上传成功！");
      });
    },
    uploadVideo(e) {
      uploadFile(e.target.files[0], res => {
        this.url = res.data.data[0];
        flash("文件上传成功！");
      });
    },
    submitVideoForm() {
      if (!this.title || !this.purpose || !this.price) {
        return false;
      }
      submitVideo(
        {
          type: 0,
          pic: this.pic,
          url: this.url,
          price: this.price,
          title: this.title,
          purpose: this.purpose
        },
        () => {
          this.$router.push("/admin/videos");
          flash("表单提交成功！");
        }
      );
    }
  }
};
</script>
